<template>
	<div id="index">
		<div class="v-header">
			<div class="v-header-title">
				<div class="v-title v-title-left">
					<div class="v-title-icon icon-left"></div>
					<router-link to="/drop" tag="div" class="v-title-word">记点滴</router-link>

				</div>
				<div class="v-title v-title-right">
					<div class="v-title-icon icon-right"></div>
					<router-link to="/diary" tag="div" class="v-title-word">写日记</router-link>
				</div>
			</div>
			<div class="v-header-list">
				<ul class="v-ul">
					<li class="v-li v-li-drop">
						<div class="v-num v-num-drop">1</div>
						<div class="v-li-word">点滴</div>
					</li>
					<li class="v-li v-li-diary">
						<div class="v-num v-num-diary">0</div>
						<div class="v-li-word">日记</div>
					</li>
					<li class="v-li v-li-month">
						<div class="v-num v-num-month">1</div>
						<div class="v-li-word">本月</div>
					</li>
					<li class="v-li v-li-today">
						<div class="v-num v-num-today">1</div>
						<div class="v-li-word">今天</div>
					</li>									
				</ul>
			</div>
		</div>
		<div class="v-main">
			<div class="v-item">
				<img src="../../static/img/index/heart-20.png"/>
				<span class="v-item-word">时间轴</span>
				<span class="v-right">
					<img src="../../static/img/index/arrow-right.png"/>
				</span>
			</div>
			<div class="v-item">
				<img src="../../static/img/index/heart-11.png"/>
				<span class="v-item-word">相册</span>
				<span class="v-right">
					<img src="../../static/img/index/arrow-right.png"/>
				</span>
			</div>
			<div class="v-item">
				<img src="../../static/img/index/heart-3.png"/>
				<span class="v-item-word">日历与十年今日</span>
				<span class="v-right">
					<img src="../../static/img/index/arrow-right.png"/>
				</span>
			</div>
			<div class="v-item">
				<img src="../../static/img/index/heart-10.png"/>
				<span class="v-item-word">日记集</span>
				<span class="v-right">
					<img src="../../static/img/index/arrow-right.png"/>
				</span>
			</div>
			<div class="v-item">
				<img src="../../static/img/index/heart-17.png"/>
				<span class="v-item-word">搜索与标签</span>
				<span class="v-right">
					<img src="../../static/img/index/arrow-right.png"/>
				</span>
			</div>
			<div class="v-item">
				<img src="../../static/img/index/heart-4.png"/>
				<span class="v-item-word">纪念日</span>
				<span class="v-right">
					<img src="../../static/img/index/arrow-right.png"/>
				</span>
			</div>
			<div class="v-item">
				<img src="../../static/img/index/heart-7.png"/>
				<span class="v-item-word">设置</span>
				<span class="v-right">
					<img src="../../static/img/index/arrow-right.png"/>
				</span>
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style lang="scss">
	#index{
		width:100%;
		height:auto;
		font-size:1.4rem;
		font-family: arial;
		.v-header{
			background:rgb(86,171,255);
			height:auto;
			.v-header-title{	
				padding:50px;
				@media screen and (min-width:200px) and (max-width:350px){
					padding:10px;
					margin-bottom:30px;
				}			
				.v-title{					
					display:inline-block;
					font-size:2rem;
					font-weight:bold;	
					padding-top:20px;														
					.icon-left{
						background: url(../../static/img/index/heart-14.png) no-repeat;
					}
					.icon-right{
						background: url(../../static/img/index/heart-13.png);
					}
					.v-title-icon{									
						width:80px;
						height:80px;
						background-size:cover ;
						margin-bottom:25px;
						@media screen and (max-width:750px){
							width:80px;
							height:80px;
						}
						@media screen and (min-width: 300px) and (max-width: 370px){
							width: 60px;
							height: 60px;
						}
					}
					.v-title-word:hover{
						cursor: pointer;
					}					
				}
				.v-title-left{
					border-right:1px solid #000;
					margin-right:-2px;					
					padding-right:50px;
				}
				.v-title-right{
					border-left:1px solid #111;
					margin-left:-2px;
					padding-left: 50px;
				}
			}
			.v-header-list{
				height:80px;
				.v-ul{					
					height:100%;
					width:100%;
					.v-li{
						float: left;
						width:25%;
						height:100%;
						font-size:2rem;	
						&:hover{
							cursor: pointer;
						}					
						.v-num{
							margin-bottom:10px;
						}
						.v-li-word{
							font-weight: bold;
						}
					}
				}
			}
		}
		.v-main{
			width:100%;
			height: auto;
			.v-item{
				text-align: left;
				padding:25px 20px;				
				border-bottom:1px solid #333;
				img{
					display: inline-block;
					width:30px;
					height:30px;
					vertical-align: middle;
				}
				.v-item-word{
					margin-left:30px;
					font-size:1.8rem;
					font-weight: bold;
				}
				.v-right{
					position: absolute;
					right: 0;
					&:hover{
							cursor: pointer;
					}
				}
			}
		}
	}
</style>